<template>
  <el-dialog
    :title="title"
    :visible.sync="show"
    width="600px"
    :before-close="() => $emit('close')"
    :modal-append-to-body="false"
  >
    <div class="flex-c align-center">
      <div class="flex-c flex-v align-center" style="margin-right: 50px">
        <img :src="left" crossorigin="anonymous" alt="" class="img">
        <el-button
          size="mini"
          style="margin-top: 10px"
          type="primary"
          @click="downLoad(left)"
        >下载</el-button>
      </div>
      <div class="flex-c flex-v align-center">
        <img :src="right" crossorigin="anonymous" alt="" class="img">
        <el-button
          size="mini"
          style="margin-top: 10px"
          type="primary"
          @click="downLoad(right)"
        >下载</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { getQrcode } from '@/api/publish'
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '抖音二维码'
    },
    item: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      left: '',
      right: ''
    }
  },
  watch: {
    item: {
      handler(val) {
        if (val.id) {
          this.getQrcode()
        }
      },
      deep: true
    }
  },
  created() {
    if (this.item.id) {
      this.getQrcode()
    }
  },
  methods: {
    async getQrcode() {
      const res = await getQrcode({
        id: this.item.id.toString()
      })
      if (res.success) {
        const prefix = 'data:image/png;base64,'

        this.left = res.result.left.indexOf(prefix) === -1 ? prefix + res.result.left : res.result.left
        this.right = res.result.right.indexOf(prefix) === -1 ? prefix + res.result.right : res.result.right
      }
    },
    downLoad(link) {
      console.log(link)
      const a = document.createElement('a')
      a.href = link
      a.download = '下载文件'
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    }
  }
}
</script>
<style lang="scss" scoped>
.img {
  width: 200px;
  height: 200px;
  &:last-child {
    margin-right: 0;
  }
}
</style>
